<template>
    <div>
        <Row>
            <div style="float:left;margin:5px"  >
                <Button type="primary" @click="btn_add_user">新增用户</Button>
            </div>
        </Row>
        <i-table border stripe  :columns="format" :data="show_list" :height="sharedState.tableHeight" >
            <template slot-scope="{ row, index }" slot="action">
                <Button type="error" style="margin-bottom: 5px ;margin-right:5px"  @click="del_user(index)">删除</Button>
            </template>
        </i-table >
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" show-total/>
        </div>
        <!-- 新增站点模态框 -->
        <Modal v-model="show_add_user_modal" width="600" draggable >
            <p slot="header" style="color:#f60;text-align:center">
                <span>添加用户</span>
            </p>
            <div >
                <Form ref="user" :model="user" :rules="user_rules" label-position="left"  :label-width="100">
                    <Form-Item label="名字:"  prop="username">
                        <Input type="text"  v-model="user.username" />
                    </Form-Item> 
                    <Form-Item label="密码:"  prop="password">
                        <Input type="text"  v-model="user.password" disabled />
                    </Form-Item> 
                    <Form-Item label="角色:"  prop="role">
                        <Select v-model="user.role">
                            <!-- <Option value="一级菜单">一级菜单</Option> -->
                            <Option v-for="role_name in role_name_list" :key="role_name" :value="role_name">{{ role_name }}</Option>
                        </Select>
                    </Form-Item> 
                    <Form-Item label="用户组:"  prop="group">
                        <Select v-model="user.group">
                            <Option value="运维">运维</Option>
                            <Option value="测试" >测试</Option>
                            <Option value="产品">产品</Option>
                            <Option value="研发">研发</Option>
                        </Select>
                    </Form-Item> 
                    <Form-Item label="手机:"  prop="phone">
                        <Input type="number"  v-model="user.phone" />
                    </Form-Item> 
                    <Form-Item label="QQ:"  prop="qq">
                        <Input type="text"  v-model="user.qq" />
                    </Form-Item> 
                    <Form-Item label="微信:"  prop="weixin">
                        <Input type="text"   v-model="user.weixin" />
                    </Form-Item> 
                    <Form-Item label="钉钉:"  prop="dinding">
                        <Input type="text"  v-model="user.dinding" />
                    </Form-Item> 
                    <Form-Item label="邮件:"  prop="email">
                            <Input type="text"  v-model="user.email" />
                    </Form-Item> 
                    <Form-Item label="备注:"  prop="remark">
                            <Input type="text"  v-model="user.remark" />
                    </Form-Item> 
                </Form> 
            </div>
            <div slot="footer">
                <!-- user是 ref的值 -->
                <Button type="primary" size="large"  @click="submit_add_user('user')">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>

import { user_list,add_user,delete_user,get_role_name } from  '@/api'
import { post } from '@/api/http'
import store from '@/store'

// <Icon type="md-eye" />
export default {
    data() {
        return {
            sharedState: store.state,
            format: [
                {
                    title: '用户名',key: 'username'
                },
                {
                    title: '密码',key: 'password',render: (h,params) => {
                        return h('div',[
                            h('a',{
                                style: {
                                    color: "blue"
                                },
                                on: {
                                    click: ()=>{                       
                                        this.handleLink(params);
                                    }
                                }
                            },'********')
                        ])
                    }
                },
                {
                    title: '用户名',key: 'username'
                },
                {
                    title: '角色',key: 'role'
                },
                {
                    title: '用户组',key: 'group'
                },
                {
                    title: '手机',key: 'phone'
                },
                // {
                //     title: '微信',key: '微信'
                // },
                // {
                //     title: 'QQ',key: 'qq'
                // },
                // {
                //     title: '邮件',key: 'email'
                // },
                // {
                //     title: 'dingding',key: '钉钉'
                // },
                // {
                //     title: '备注',key: 'remark'
                // },
                {
                    title: '操作',slot: 'action',width: 200,align: 'center'
                }
            ],
            // 新增站点绑定
            user: {
                username: '',
                password: '',
                role: '',
                group: '',
                qq: '',
                weixin: '',
                dingding: '',
                email: '',
                phone: '',
                remark: '',
            },
            pwd_length: 8,
            // 环境列表
            role_name_list: [],
            user_rules: {
                username:[
                    {required: true,message:"请输入用户名称",trigger: 'blur'},
                ],
            },
            show_add_user_modal: false,
            total_list: [],
            show_list: [],
            // 分页
            total: 0,
            pageSize: 15,

        }
    },
    methods: {
        // 点击密码
        handleLink(params){
          console.log(params.row.password)  
        },
        // 
        del_user(index){
            let id = this.show_list[index].id
            let name = this.show_list[index].username
            let result = confirm("确定要删除"+name+"吗?")
            if(result == false) return 
            let data = {"id":id}
            post(delete_user,data,).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('删除'+name+'成功')
                    this.refresh()
                }else {
                    alert("删除失败:",info)
                }
            })

        },
        // 提交新增用户
        submit_add_user(name){
            let validate = false
            this.$refs[name].validate((valid) => {
                if (valid) {
                    // this.$Message.success('表单数据验证成功!');
                    validate = true
                    console.log('表单数据验证成功!')
                } else {
                    this.$Message.error('表单数据验证失败!');
                    validate = false
                }
            })
            if(!validate) return
            let data = JSON.stringify({"user":this.user})
            post(add_user,data).then( response=> {
                let res = JSON.stringify(response.data)
                if(res.indexOf('ok')!= -1){
                    this.$Message.success('添加用户成功')
                    this.show_add_user_modal = false
                    this.refresh()
                }else {
                    alert(alert)
                }
            })
        },
        // 随机8位密码
        create_pwd(){
            let pwd_length= this.pwd_length;
            let new_pwd = "";
            let j = 0;
            // let char = 'ABCDEFGHIJKLMNPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890-\\/.!@#$%^&()_';
            // 去掉一些坑爹的字符
            let char = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnopqrstuvwxyz1234567890-!@#$_';
            for (let i = 0; i < parseInt(pwd_length); i++) {
                j = Math.floor(Math.random() * char.length);
                new_pwd += char.charAt(j);
                // m += j+=',';
            }
            return new_pwd
        },
        // 点击新增用户
        btn_add_user(){
            post(get_role_name).then( response => {
                let res = response.data
                this.role_name_list = res
            })
            // 生成密码
            this.user.password = this.create_pwd()
            this.show_add_user_modal = true
        },
        changePage(index) {
            let _start = (index -1) * this.pageSize
            let _end = index * this.pageSize
            this.show_list = this.total_list.slice(_start,_end)
        },
        refresh() {
            post(user_list).then( response => {
                this.total_list = response.data
                this.total = response.data.length
                if(this.total < this.pageSize) {
                    this.show_list = this.total_list
                }else {
                    // 修改改数据之后显示回到第一页的bug，改为停留在当前页
                    let currentPage = this.$refs.page.currentPage
                    let _start = (currentPage-1) * this.pageSize
                    let _end = currentPage * this.pageSize
                    this.show_list = this.total_list.slice(_start,_end)
                }
            })
        }
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
<style scoped>

</style>